<script setup lang="ts">
// 生意参谋 客户透视 客户分析 客户群体趋势

import EChart from "~/contentScripts/views/echart.vue";
import BaseApp from "~/contentScripts/views/sycm/baseApp.vue";
import User from "~/contentScripts/views/tao/list/components/user.vue";
import {isLogin} from "~/logic";
import SYCM from "~/utils/ali/sycm";
import Trans from "~/utils/sycm/trans";

const loginVisible = ref<Boolean>(false);
const data = ref<any>();
const showZs = ref<Boolean>(false);
const visible = ref<Boolean>(false);
const columns = ref<any[]>([]);
const echartOptions = ref<any>({});
const calcEchart = () => {
  const xAxis = data.value.map((item: any) => {
    return item.date;
  }).reverse();
  const tradeIndex = data.value.map((item: any) => {
    if (showZs.value) {
      return item.tradeIndex;
    } else {
      return Trans.number(item.tradeIndex).toFixed(0);
    }
  }).reverse();
  const payByrCntIndex = data.value.map((item: any) => {
    if (showZs.value) {
      return item.payByrCntIndex;
    } else {
      return Trans.number(item.payByrCntIndex).toFixed(0);
    }
  }).reverse();
  const payConvRate = data.value.map((item: any) => {
    return item.payConvRate * 100;
  }).reverse();
  // const visitor = data.value.map((item: any) => {
  //   return item.visitor;
  // });
  // const price = data.value.map((item: any) => {
  //   return item.price;
  // });
  // const uvPrice = data.value.map((item: any) => {
  //   return item.uvPrice;
  // });
  echartOptions.value = {
    tooltip: {
      trigger: 'axis',
      formatter: (params: any) => {
        let str = '';
        params.forEach((item: any) => {
          if (item.seriesName === '支付转化率') {
            str += `${item.marker}${item.seriesName}: ${item.value.toFixed(2)}%<br/>`;
          } else {
            str += `${item.marker}${item.seriesName}: ${item.value}<br/>`;
          }
        });
        return str;
      }
    },
    legend: {
      data: [ showZs.value ? '交易指数' : '交易金额', showZs.value ? '客群指数' : '支付买家数', '支付转化率',]
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: xAxis,
      },
    ],
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: showZs.value ? '交易指数' : '交易金额',
        type: 'line',
        smooth: true,
        data: tradeIndex,
      },
      {
        name: showZs.value ? '客群指数' : '支付买家数',
        type: 'line',
        smooth: true,
        data: payByrCntIndex,
      },
      {
        name: '支付转化率',
        type: 'line',
        smooth: true,
        data: payConvRate,
      },
      // {
      //   name: '访客数',
      //   type: 'line',
      //   smooth: true,
      //   data: visitor,
      // },
      // {
      //   name: '客单价',
      //   type: 'line',
      //   smooth: true,
      //   data: price,
      // },
      // {
      //   name: 'UV价值',
      //   type: 'line',
      //   smooth: true,
      //   data: uvPrice,
      // },
    ],
  };
}
const calcColumns = () => {
  columns.value = [
    {
      dataIndex: 'title',
      title: '人群属性',
      sorter: (a: any, b: any) => a.title - b.title,
    },
    {
      dataIndex: 'date',
      title: '日期',
      sorter: (a: any, b: any) => a.date - b.date,
    },
    {
      dataIndex: 'tradeIndex',
      title: showZs.value ? '交易指数' : '交易金额',
      sorter: (a: any, b: any) => a.tradeIndex - b.tradeIndex,
      dataType: 'customRender',
      render: (text: any) => {
        if (showZs.value) {
          return text;
        } else {
          const price = Trans.number(text).toFixed(0);
          // 每隔三位加逗号
          return price.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
      // width: 200,
    },
    {
      dataIndex: 'payByrCntIndex',
      title: showZs.value ? '客群指数' : '支付买家数',
      sorter: (a: any, b: any) => a.payByrCntIndex - b.payByrCntIndex,
      dataType: 'customRender',
      render: (text: any) => {
        if (showZs.value) {
          return text;
        } else {
          const value = Trans.number(text).toFixed(0);
          // 每隔三位加逗号
          return value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        }
      }
      // width: 200,
    },
    {
      dataIndex: 'payConvRate',
      title: '支付转化率',
      sorter: (a: any, b: any) => a.payConvRate - b.payConvRate,
      dataType: 'customRender',
      render: (text: any) => {
        return (text * 100).toFixed(2) + '%';
      }
      // width: 200,
    },
    {
      dataIndex: 'visitor',
      title: '访客数',
      sorter: (a: any, b: any) => a.visitor - b.visitor,
      align: 'right',
      dataType: 'customRender',
      render: (text: any) => {
        return text.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      }
    },
    {
      dataIndex: 'price',
      title: '客单价',
      align: 'right',
      sorter: (a: any, b: any) => a.price - b.price,
    },
    {
      dataIndex: 'uvPrice',
      title: 'UV价值',
      align: 'right',
      sorter: (a: any, b: any) => a.uvPrice - b.uvPrice,
    }
  ];
}
const __option = getCurrentInstance()?.appContext.provides.option;
const handle = async () => {
  if (isLogin({
    emit: () => {
      loginVisible.value = true;
    }
  },__option)) {
    let arr: any[] = await SYCM.getInternalFiberData('#sycm-mc-mq-customer-analysis > div.oui-card-content.alife-one-design-sycm-indexes-trend-card-content > div > div > div > div > div > div', 'memoizedProps.children.props.data');
    const title = document.querySelector("#customerAnalysis > div.oui-card-content > span > h4").innerHTML.replaceAll(' ', '').replaceAll('客群趋势-', '').replaceAll('客群指数', '');
    calcColumns();
    arr = arr.map((item: any) => {
      // 访客数
      const visitor = (Trans.number(item.payByrCntIndex).toFixed(0) / item.payConvRate).toFixed(0);
      // 客单价
      const price = (Trans.number(item.tradeIndex).toFixed(2) / Trans.number(item.payByrCntIndex).toFixed(0)).toFixed(2);
      // UV价值
      const uvPrice = (Trans.number(item.tradeIndex).toFixed(2) / parseInt(visitor)).toFixed(2);
      return {
        ...item,
        title,
        visitor: visitor,
        price,
        uvPrice,
      }
    })
    data.value = arr.reverse();
    calcEchart();
    visible.value = true;
  }
}
watch(() => showZs.value, () => {
  calcColumns();
  calcEchart();
});
</script>

<template>
  <base-app>
    <a-button-group>
      <user style="margin-right: 0;"/>
      <a-button type="primary" size="small" @click="handle">
        一键转化
      </a-button>
    </a-button-group>
    <user-login-modal v-model:login-visible="loginVisible"/>
    <custom-modal title="市场-客群透视-客群趋势" width="95%" style="top: 20px" v-model:open="visible">
      <template #headerRight>
        <SYCMCustomModalHeaderNotice/>
        <a-checkbox style="margin-left: 10px;" v-model:checked="showZs">显示指数</a-checkbox>
      </template>
      <div style="height: calc(100vh - 150px);overflow-y: auto;">
        <EChart :options="echartOptions" style="height: 300px;"/>
        <base-table table-name="市场-客群透视-客群趋势" :scroll="{
          y:500,
      }" :data-source="data" :columns="columns"
        >

        </base-table>
      </div>
    </custom-modal>
  </base-app>
</template>

<style scoped>

</style>
